<template>
  <div>
    <bread-crumb />
    <a-card class="m-24" :bordered="false">
      <a-form :form="form" @submit="handleSubmit">
        <a-form-item
          label="账号"
          :labelCol="{ span: 7 }"
          :wrapperCol="{ span: 10 }">
          <a-input placeholder="请输入账号" v-decorator="['username',{rules: [{ required: true, message: '账号不能为空!' }]}]"/>
        </a-form-item>
        <a-form-item
          label="时间"
          :labelCol="{ span: 7 }"
          :wrapperCol="{ span: 10 }">
          <a-range-picker v-decorator="['time']" style="width: 100%"/>
        </a-form-item>
        <a-form-item
          label="密码"
          :labelCol="{ span: 7 }"
          :wrapperCol="{ span: 10 }">
          <a-input
            placeholder="请输入密码"
            type="password"
            v-decorator="['password', {rules: [ { required: true,message: '请输入密码'},{ message: '密码应在6-18位',min: 6, max: 18 } ]}]" />
        </a-form-item>
        <a-form-item
          label="确认密码"
          :labelCol="{ span: 7 }"
          :wrapperCol="{ span: 10 }">
          <a-input
            placeholder="请再次输入密码"
            type="password"
            v-decorator="['password2', {rules: [{ required: true, message: '请再次输入密码' }, { validator:passwordValidator } ]}]" />
        </a-form-item>
        <a-form-item
          label="多个输入框"
          :required="true"
          :labelCol="{ span: 7 }"
          :wrapperCol="{ span: 10 }">
          <a-col :span="11">
            <a-form-item>
              <a-input placeholder="请输入值1" v-decorator="['input1',{rules: [{ required: true, message: '请输入值1' },]}]" />
            </a-form-item>
          </a-col>
          <a-col :span="2">
            <span :style="{ display: 'inline-block', width: '100%', textAlign: 'center' }">
              -
            </span>
          </a-col>
          <a-col :span="11">
            <a-form-item>
              <a-input
                placeholder="请输入值2"
                v-decorator="['input2',{rules: [{ required: true, message: '请输入值2' },]}]" />
            </a-form-item>
          </a-col>
        </a-form-item>
        <a-form-item
          v-for="(k, index) in keys"
          :key="k"
          :required="true"
          :label="index === 0 ? '人员信息' : '人员信息'+(+index+1)"
          :labelCol="{ span: 7 }"
          :wrapperCol="{ span: 10 }"
          style="margin-bottom: 12px">
          <a-form-item>
            <a-input
              placeholder="请输入用户名"
              v-decorator="[`person[${k}].name`,{validateTrigger: ['change', 'blur'],rules: [{ required: true, message: '请输入用户名', }], }]" />
          </a-form-item>
        </a-form-item>
        <a-form-item
          label=" "
          :colon="false"
          :labelCol="{ span: 7 }"
          :wrapperCol="{ span: 10 }">
          <a-button type="dashed" @click="add">添加</a-button>
        </a-form-item>
        <a-form-item
          label=" "
          :colon="false"
          :labelCol="{ span: 7 }"
          :wrapperCol="{ span: 10 }">
          <a-button type="primary" htmlType="submit">提交</a-button>
          <a-button @click="reset" style="margin-left: 8px">重置</a-button>
          <a-button @click="setValues" style="margin-left: 8px">赋值</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script>
import BreadCrumb from '@/components/tools/Breadcrumb'
import moment from 'moment'
export default {
  components: {
    BreadCrumb
  },
  data () {
    return {
      form: this.$form.createForm(this),
      id: 0,
      keys: [0]
    }
  },
  methods: {
    // 提交
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          let params = Object.assign({}, values)
          if (params.time !== undefined) {
            params.time = [values.time[0].format('YYYY-MM-DD HH:mm:ss'), values.time[1].format('YYYY-MM-DD HH:mm:ss')]
          }
          console.log(params)
        }
      })
    },
    //重置
    reset () {
      this.keys = [0]
      // 可以清空某些值包括验证状态，不填就全部
      // this.form.resetFields(['username','password'])
      this.form.resetFields()
    },
    // 赋值
    setValues() {
      let values = {
        username: 'username',
        time: [ moment('2018-12-12'), moment('2019-01-12') ],
        password: '123456',
        password2: '123456',
        input1: 1,
        input2: 3,
        person: [
          { name: '张三'},
        ]
      }
      this.form.setFieldsValue(values)
    },
    passwordValidator (rule, value, callback) {
      if (value !== this.form.getFieldValue('password')) {
        callback(new Error('两次密码不一致'))
      } else {
        callback()
      }
    },
    add () {
      this.keys = [...this.keys, ++this.id]
    }
  }
}
</script>

<style scoped>

</style>
